<template>
  <div class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
        <el-select v-model="examineStatusOption" clearable placeholder="审核状态" style="margin:0 20px;">
          <el-option
            v-for="item in examineStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="demandStatusOption" clearable placeholder="服务状态" style="margin:0 20px;">
          <el-option
            v-for="item in demandStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="spreadStatusOption" clearable placeholder="展示状态" style="margin:0 20px;">
          <el-option
            v-for="item in spreadStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

      </el-col>

      <el-col :span="24" class="action-bar">
        <el-input v-model="searchText" placeholder="输入关键字" style="width:300px"></el-input>
        <el-col :span="7" :offset="1">
          <el-date-picker type="datetime" placeholder="开始时间" value-format="yyyy-MM-dd HH:mm:ss"
                          v-model="searchTime.startTime" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="1" style="text-align:center">-</el-col>
        <el-col :span="7">
          <el-date-picker type="datetime" placeholder="截止时间" value-format="yyyy-MM-dd HH:mm:ss"
                          v-model="searchTime.endTime" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-col>
      <el-col :span="24" class="action-bar">
        <el-button type="primary" size="medium" @click="search" style="margin-left:20px">检索</el-button>
      </el-col>

      <el-col class="action-bar screen">

        <el-checkbox label="浏览" name="view" v-model="showColumns.view"></el-checkbox>
        <el-checkbox label="关注" name="follow" v-model="showColumns.follow"></el-checkbox>
        <!-- <el-checkbox label="分享" name="share" v-model="showColumns.share"></el-checkbox> -->
        <el-checkbox label="展示状态" name="spread" v-model="showColumns.spread"></el-checkbox>
        <el-checkbox label="发布时间" name="createdAt" v-model="showColumns.createdAt"></el-checkbox>
        <el-checkbox label="服务类型" name="demandType" v-model="showColumns.demandType"></el-checkbox>
        <el-checkbox label="委托协会" name="entrustSociety" v-model="showColumns.entrustSociety"></el-checkbox>
<!--        <el-button type="primary" size="medium" @click="search" style="margin-left:20px">检索</el-button>-->
<!--        <el-button type="primary" size="medium" @click="newDemandVisible=true" v-if="is_admin==0">发布</el-button>-->
<!--        <el-button type="primary" size="medium" @click="sendDemandByModelMsg" style="margin-left:20px" v-if="is_admin==1">推送模板消息</el-button>-->
      </el-col>
    </div>


    <!-- 列表 -->
    <el-table
      :data="tableData"
      v-loading="tableLoadingShow"
      element-loading-text="拼命加载中"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="标题"
        show-overflow-tooltip
        width="180">
        <template slot-scope="scope">
          <div @click.stop="showDemandDetail(scope.row.id)"
               style="whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis;width:100%;cursor:pointer;color:#409EFF">
            {{scope.row.title}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="头像"
        width="100" >
        <template slot-scope="scope">
          <div v-if="scope.row.user_info && scope.row.status == 1">
            <img :src="scope.row.user_info.photo_url" alt=""
                 style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="发布方"
        width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 1">{{scope.row.user_info.realname?scope.row.user_info.realname:scope.row.user_info.nickname}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机"
        width="120"
      >
        <template slot-scope="scope">
          <div  v-if="scope.row.status == 1">{{scope.row.user_info.phone}}</div>
        </template>
      </el-table-column>

      <el-table-column
        prop=""
        label="审核状态"
        width="100"
      >
        <template slot-scope="scope">
          <div>
            <el-tag v-show="scope.row.review==0">未审核</el-tag>
            <el-tag type="success" v-show="scope.row.review==1">成功</el-tag>
            <el-tag type="info" v-show="scope.row.review==2">拒绝</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="服务状态"

        width="100"
      >
        <template slot-scope="scope">
          <div>
            <el-tag v-show="scope.row.status==0">筛选中</el-tag>
            <el-tag type="success" v-show="scope.row.status==1">对接成功</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="委托协会"
        width="100"
        v-if="showColumns.entrustSociety"
      >
        <template slot-scope="scope">
          <div>
            <el-tag type="success" v-if="scope.row.is_association_docking==1">是</el-tag>
            <el-tag type="info" v-show="scope.row.is_association_docking==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="browse_num"
        label="浏览"
        width="80"
        v-if="showColumns.view"
      >
      </el-table-column>
      <el-table-column
        prop="attention_num"
        label="关注"
        width="80"
        v-if="showColumns.follow"
      >
      </el-table-column>
      <el-table-column
        prop="share_num"
        label="分享"
        width="80"
        v-if="showColumns.share"
      >
      </el-table-column>
      <el-table-column
        label="展示状态"
        v-if="showColumns.spread"
        show-overflow-tooltip
        width="100"
      >
        <template slot-scope="scope">
          <div>
            <el-tag type="info" v-show="scope.row.is_shop==0">下架</el-tag>
            <el-tag type="success" v-show="scope.row.is_shop==1">上架</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="classify_name"
        label="服务类型"
        v-if="showColumns.demandType"
        show-overflow-tooltip
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="发布时间"
        v-if="showColumns.createdAt"
        show-overflow-tooltip
        width="150"
      >
      </el-table-column>
      <el-table-column label="审核" width='250' v-if="is_admin==1">
        <template slot-scope="scope">
          <el-button type='primary' v-if="scope.row.review==0" size="mini" @click="passDemandApplication(scope.row.id)">
            通过
          </el-button>
          <el-button type='danger' v-if="scope.row.review==0" size="mini" @click="denyDemandApplication(scope.row.id)">
            拒绝
          </el-button>
        </template>
      </el-table-column>
<!--      <el-table-column label="是否推送" width='250' v-if="is_admin==1">-->
<!--        <template slot-scope="scope">-->
<!--&lt;!&ndash;          <el-switch&ndash;&gt;-->
<!--&lt;!&ndash;            v-model="scope.row.is_push"&ndash;&gt;-->
<!--&lt;!&ndash;            active-text="是"&ndash;&gt;-->
<!--&lt;!&ndash;            active-value="1"&ndash;&gt;-->
<!--&lt;!&ndash;            inactive-text="否"&ndash;&gt;-->
<!--&lt;!&ndash;            inactive-value="0"&ndash;&gt;-->
<!--&lt;!&ndash;            @change="hhhh(is_push,scope.row.id)"&ndash;&gt;-->
<!--&lt;!&ndash;          >&ndash;&gt;-->
<!--&lt;!&ndash;          </el-switch>&ndash;&gt;-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" min-width='150'>
        <template slot-scope="scope">
          <el-select v-model='scope.row.operation' style='width: 120px' placeholder="请选择操作"
                     v-show="scope.row.review!=0">
<!--            <el-option value='评论管理'>-->
<!--              <el-button style="width:100%" type='text' @click="toCommentManage(scope.row.id)">评论管理</el-button>-->
<!--            </el-option>-->
            <el-option value='对接方' v-if="scope.row.review!=2">
              <el-button style="width:100%" type='text' @click="toDemandReception(scope.row.id)">对接方</el-button>
            </el-option>
            <!--<el-option value='上架' v-if="scope.row.is_shop!=1 && scope.row.review==1">
              <el-button style="width:100%" type='text' @click="spreadOn(scope.row.id)">上架</el-button>
            </el-option>
            <el-option value='下架' v-if="scope.row.is_shop!=0 && scope.row.review==1">
              <el-button style="width:100%" type='text' @click="spreadOff(scope.row.id)">下架</el-button>
            </el-option>
            <el-option value='推送' v-if="is_admin==1&&scope.row.review==1">
              <el-button style="width:100%" type='text' @click="toPushDemand(scope.row.id)">推送</el-button>
            </el-option>
            <el-option value="删除">
              <el-button type='text' style="width:100%" @click="deleteDemand(scope.row.id)">删除</el-button>
            </el-option>-->
          </el-select>
          <el-select v-model='scope.row.operation' style='width: 120px' placeholder="请选择操作"
                     v-show="scope.row.review==0&&is_admin==1">
            <el-option value="删除">
              <el-button type='text' style="width:100%" @click="deleteDemand(scope.row.id)">删除</el-button>
            </el-option>
          </el-select>
          <div v-show="scope.row.review==1&&is_admin==1" style="display: inline-block">
            <span v-show="scope.row.new_comment==1" style="color:#fff;display:inline-block;background:red;border-radius:50%;width:10px;height:10px;text-align:center;line-height:10px;margin-left:10px"></span>
            <el-button size="mini" type='primary' @click="toCommentManage(scope.row.id)" >评论管理</el-button>
          </div>
        </template>
      </el-table-column>

    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->


    <!-- 服务详情 -->
    <el-dialog title="服务详情" :visible.sync="demandDetailVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px">
        <el-form-item label="标题">
          <div>{{demandDetail.title}}</div>
        </el-form-item>
        <el-form-item label="描述">
          <div>{{demandDetail.content}}</div>
        </el-form-item>
        <el-form-item label="图片">
          <div class="demo-image__preview">
            <el-image
              class="el-image__preview"
              style="width:150px;height:150px;object-fit:cover;display: inline-block;margin-right: 10px;"
              v-for="(item,index) in demandDetail.img_array_url" :key="index" :src="item"
              :preview-src-list="demandDetail.img_array_url"
            ></el-image>
          </div>
        </el-form-item>
        <el-form-item label="发布方" v-if="demandDetail.status == 1">
          <div>{{demandDetail.user_info.realname?demandDetail.user_info.realname:demandDetail.user_info.nickname}}</div>
        </el-form-item>
        <el-form-item label="头像" v-if="demandDetail.status == 1">

          <div><img :src="demandDetail.user_info.photo_url" alt=""
                    style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
        </el-form-item>
        <el-form-item label="手机" v-if="demandDetail.status == 1">
          <div>{{demandDetail.user_info.phone}}</div>
        </el-form-item>
        <el-form-item label="浏览">
          <div>{{demandDetail.browse_num}}</div>
        </el-form-item>
        <el-form-item label="关注">
          <div>{{demandDetail.attention_num}}</div>
        </el-form-item>
        <el-form-item label="审核状态">
          <div>
            <el-tag v-show="demandDetail.review==0">未审核</el-tag>
            <el-tag type="success" v-show="demandDetail.review==1">成功</el-tag>
            <el-tag type="info" v-show="demandDetail.review==2">拒绝</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="服务类型">
          <div>{{demandDetail.classify_name}}</div>
        </el-form-item>
        <el-form-item label="标签">
          <div class="tag-wrapper">
            <span v-for="(item,index) of demandDetail.label_arr" :key="index">{{item}}</span>
          </div>
        </el-form-item>
        <el-form-item label="所在地区" v-if="demandDetail.province!=null">
          <div>
            {{demandDetail.province == null?'':(demandDetail.province[2]=='市'?demandDetail.province:(demandDetail.province+(demandDetail.city==null?'':demandDetail.city)))}}
            {{demandDetail.area==null?'':demandDetail.area}}
            {{demandDetail.address==null?'':demandDetail.address}}
          </div>
        </el-form-item>
        <el-form-item label="服务状态">
          <div>
            <el-tag v-show="demandDetail.status==0">筛选中</el-tag>
            <el-tag type="success" v-show="demandDetail.status==1">对接成功</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="展示单位信息">
          <div>
            <el-tag type="info" v-show="demandDetail.is_show_publisher==0">否</el-tag>
            <el-tag type="success" v-show="demandDetail.is_show_publisher==1">是</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="委托协会">
          <div>
            <el-tag type="info" v-show="demandDetail.is_association_docking==0">否</el-tag>
            <el-tag type="success" v-show="demandDetail.is_association_docking==1">是</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="展示状态">
          <div>
            <el-tag type="info" v-show="demandDetail.is_shop==0">下架</el-tag>
            <el-tag type="success" v-show="demandDetail.is_shop==1">上架</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="发布时间">
          <div>{{demandDetail.created_at}}</div>
        </el-form-item>
        <el-form-item label="对接时间">
          <div>{{demandDetail.success_time}}</div>
        </el-form-item>
<!--        <el-form-item label="链接">-->
<!--          <el-button type="primary"-->
<!--                     v-clipboard:copy="demandDetail.link_url"-->
<!--                     v-clipboard:success="onCopy"-->
<!--                     size="mini"-->
<!--                     v-clipboard:error="onError">复制链接-->
<!--          </el-button>-->
<!--        </el-form-item>-->


      </el-form>
    </el-dialog>
    <!-- 服务详情end -->


  </div>
</template>
<script>
  import ORIGIN from '../../assets/json/origin.json'

  export default {
    name: 'member',
    data() {
      return {
        is_admin: window.localStorage.getItem('is_admin'),
        ORIGIN,
        demandDetailVisible: false,//服务弹窗状态
        newDemandVisible: false,//新建服务弹窗
        searchText: '',
        userAuthId: '',//选中的用户id
        searchTime: {
          startTime: '',
          endTime: ''
        },

        examineStatusOption: '',//审核状态
        examineStatusOptions: [
          {label: '全部', value: -1},
          {label: '待处理', value: 3},
          {label: '成功', value: 1},
          {label: '拒绝', value: 2},
        ],

        demandStatusOption: '',//服务状态
        demandStatusOptions: [
          {label: '全部', value: -1},
          {label: '筛选中', value: 2},
          {label: '成功对接', value: 1},

        ],
        spreadStatusOption: '',//展示状态
        spreadStatusOptions: [
          {label: '全部', value: -1},
          {label: '上架', value: 1},
          {label: '下架', value: 2},

        ],

        demandTypeOption: 1,//服务类型
        demandTypeOptions: [
          {label: '招聘', value: 1},
          {label: '自定义', value: 2},

        ],

        industryOptions:[],

        showColumns: {
          view: '',
          follow: '',
          spread: '',
          share: '',
          createdAt: '',
          demandType: '',
          entrustSociety: '',
        },
        show_Publisher: true,
        association_Docking: false,
        tag: '',
        tagList: [],//标签
        postData: {
          tit: '',
          desc: '',
          demandTypeOption: '',
          hireNum: '',
          address: '',
          addressDetail: '',
          endDate: '',
          industry:'',
          is_show: 1,
          is_docking: 0
        },
        demandDetail: {user_info: {}},//查看详情
        fileList: [],


        tableData: [{user_info: {}}],
        page: 1,
        totalPage: 0,
        tableLoadingShow: false
      }
    },
    watch: {},
    computed: {
      imgList() {

        return this.fileList.map(item => {
          if (item.response) {
            return item.response.data.id
          } else {
            return item.id
          }

        })
      }
    },
    methods: {
      async sendDemandByModelMsg(){
        const res = await this.$api.sendDemandByModelMsg();
        if (res.data.level == 'success'){
          this.$message({
            type: 'success',
            message: res.data.message
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      },
      hhhh(e,id){
        console.log(e,id)
      },
      ha(e){
        if (e){
          this.postData.is_show = 1
        } else {
          this.postData.is_show = 0
        }
      },
      has(e){
        if (e){
          this.postData.is_docking = 1
        } else {
          this.postData.is_docking = 0
        }
      },
      async getIndustryList(){
        //获取行业列表
        let res=await this.$api.getIndustryList();
        if(res.data.level=='success'){
          this.industryOptions=res.data.data.map(item=>{
            return {
              label:item.name,
              value:item.id
            }
          });
        }
      },
      onCopy(e) {
        this.$message({
          type: 'success',
          message: '复制成功'
        })
      },
      onError(erro) {
        this.$message({
          type: 'error',
          message: '复制失败'
        })
      },
      search() {
        this.tableLoadingShow = true;
        this.page = 1;
        this.getDemandList()
      },
      addTag() {
        if (this.tag == '') {
          this.$message({
            type: 'warning',
            message: '标签不能为空'
          });
          return;

        }
        this.tagList.push(this.tag);
        this.tag = ''
      },
      deleteTag(item, index) {
        //删除
        this.tagList.splice(index, 1);
      },
      async getDemandClassify() {
        //获取服务类型
        let params = {
          page: this.page,
          limit: 16,
        }
        let res = await this.$api.getDemandClassify(
          params);
        if (res.data.level == 'success') {
          this.demandTypeOptions = res.data.data;
        }
      },
      async getDemandList() {
        //获取对接列表
        let params = {
          status: this.demandStatusOption,
          review: this.examineStatusOption,
          is_shop: this.spreadStatusOption,
          start_time: this.searchTime.startTime,
          end_time: this.searchTime.endTime,
          page: this.page,
          limit: 16,
          keyword: this.searchText
        }
        let res = await this.$api.getDemandDockList(
          params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
        this.tableLoadingShow = false;
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getDemandList();
      },
      async deleteDemand(id) {
        //删除服务
        let judge = null;
        let tit = '删除该服务?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.delDemandByAdmin(id)
        }
        console.log(judge)
      },
      async delDemandByAdmin(id) {
        let res = await this.$api.delDemandByAdmin({demand_id: id})
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getDemandList()
        } else {
          this.$message.error(res.data.message);
        }
      },
      async passDemandApplication(id) {
        //通过审核
        let judge = null;
        let tit = '通过该服务?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.demandApplicationHandle(1, id)
        }
        console.log(judge)
      },
      async denyDemandApplication(id) {
        //拒绝审核
        let judge = null;
        let tit = '拒绝该服务?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.demandApplicationHandle(2, id)
        }
        console.log(judge)
      },
      async demandApplicationHandle(type, id) {
        let res = await this.$api.reviewDemand({demand_id: id, type: type});
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getDemandList()
        } else {
          this.$message.error(res.data.message);
        }
      },

      async newDemand() {
        console.log(this.postData.address)
        //新建服务
        let params = {
          classify_id: this.demandTypeOption,
          title: this.postData.tit,
          content: this.postData.desc,
          img_ids: this.imgList,
          recruitment: this.postData.hireNum,
          end_time: this.postData.endDate,
          label_arr: this.tagList,
          industry_id: this.postData.industry,
          province: this.postData.address[0],
          city: this.postData.address[1],
          area: this.postData.address[2],
          is_show_publisher: this.postData.is_show,
          is_association_docking: this.postData.is_docking
        }
        let res = await this.$api.sendDemandByAdmin(params);
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.newDemandVisible = false;

          this.getDemandList()
        } else {
          this.$message.error(res.data.message);
        }

      },
      //推送服务
      async toPushDemand(id){
        let judge = null;
        let tit = '推送该服务?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.sendDemandSubscribeMessage(id)
        }
      },
      async sendDemandSubscribeMessage(id){
        const res = await this.$api.sendDemandSubscribeMessage({demand_id:id});
        if (res.data.level == 'success'){
          this.$message.success(res.data.message);
          this.getDemandList();
        } else {
          this.$message.error(res.data.message);
        }
      },
      handlePreview(file) {
        console.log(file);
      },
      beforeAvatarUpload(file) {
        //上传照片前的操作
        // console.log(file,555)
      },
      handleRemove(file, fileList) {
        //移除照片
        this.fileList = fileList
      },
      handlePhoto(res, file, fileList) {
        //上传照片成功
        this.fileList = fileList.map(item => {
          let obj = {};
          obj.id = item.response.data.id;
          obj.url = item.response.data.img_url;
          return obj
        })
        this.fileList = fileList
      },
      async showDemandDetail(id) {
        let res = await this.$api.getDemandDetail({demand_id: id});
        if (res.data.level == 'success') {
          this.demandDetail = res.data.data
          this.demandDetailVisible = true
        }

      },
      toDemandReception(id) {
        this.$router.push({name: 'Demand_reception', query: {id: id}})
      },
      toCommentManage(id){
        this.$router.push({name: 'Demand_comment', query: {id: id}})
      },
      async spreadOn(id) {
        //上架
        let judge = null;
        let tit = '上架该服务?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.setDemandShopStatus(1, id)
        }
      },
      async spreadOff(id) {
        //下架
        let judge = null;
        let tit = '下架该服务?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.setDemandShopStatus(2, id)
        }
      },
      async setDemandShopStatus(status, id) {
        let res = await this.$api.setDemandShopStatus({demand_id: id, status: status})
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.newDemandVisible = false;

          this.getDemandList()
        } else {
          this.$message.error(res.data.message);
        }

      },
      initData() {
        Object.assign(this.$data.postData,this.$options.data().postData)
        Object.assign(this.$data.demandDetail,this.$options.data().demandDetail)
        // this.postData = this.$options.data().postData;
        // this.demandDetail = this.$options.data().demandDetail
        this.fileList = [];
        this.tagList = []
      }

    },
    mounted() {
      this.getDemandClassify()
      this.getDemandList();
      this.getIndustryList();
    },
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }

  .memberPicWrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .memberPicDetail {
    text-align: center;
    margin: 0 10px;
    position: relative;

    .delete {
      width: 20px;
      height: 20px;
      position: absolute;
      top: -10px;
      right: -10px;
    }
  }

  .tag-wrapper {
    span {
      padding: 20px
    }
  }
</style>
